{% extends "main/base.html" %}
{% load static i18n main_tag %}
{% block title %}{% trans '订单参与者编辑' %}{% endblock %}
{% block this_css %}
<link type="text/css" href="{% static 'flatlab/css/bootstrap-select.min.css' %}" rel="stylesheet">
<link type="text/css" href="{% static 'flatlab/assets/jquery-multi-select/css/multi-select.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
<section class="col-lg-offset-3 col-lg-6">
    <section class="panel">
        <header class="panel-heading">
            {% trans "订单参与者编辑" %}
            {% if form.errors %}
            <p>{% trans "提交的数据有误,请认真检查!" %}</p>
            {% endif %}
        </header>
        <div class="panel-body">
            <form method="post" enctype="multipart/form-data" class="form-horizontal">{% csrf_token %}
                {{ form.non_field_errors }}
                <div class="form-group">
                    <div class="col-lg-2">{{ form.created_by.label_tag }}</div>
                    <div class="col-lg-10">{{ form.created_by }}{{ form.created_by.errors }}</div>
                </div>
                <div class="form-group">
                    <div class="col-lg-2">{{ form.cooperators.label_tag }}</div>
                    <div class="col-lg-10">{{ form.cooperators }}{{ form.cooperators.errors }}</div>
                </div>
                <div class="form-group" align="right">
                    <div class="col-lg-12">
                        <button type="submit" class="btn btn-danger" value="Update">{% trans "提交" %}</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
</section>
{% endblock %}
{% block this_js %}
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-select.min.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/js/bootstrap-switch.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.multi-select.js' %}"></script>
<script type="text/javascript" src="{% static 'flatlab/assets/jquery-multi-select/js/jquery.quicksearch.js' %}"></script>
<script>
    $('#id_cooperators').multiSelect({
        selectableHeader: "<div>可选同事</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        selectionHeader: "<div>选中的同事</div><input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });
</script>
{% endblock %}